import React from 'react';
import { FirstHeaderC } from '@/src/components';
import Color from '@/src/css/colors';
import ReactEcharts from 'echarts-for-react';
import PropTypes from 'prop-types';

class MyEcharts extends React.Component {
  static defaultProps = {
    series: [],
    toolTipFormat: undefined,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  showEcharts = () => {
    const { series, toolTipFormat } = this.props;
    const colors = Color.echart;
    const option = {
      tooltip: {
        // trigger:item,
        // position: 'insideTopLeft',
        formatter: toolTipFormat
          ? toolTipFormat
          : (params) => {
              // console.warn(params);
              const arr = [`产品名称:${params.name}<br/>`, '' + '<br/>', `$${params.value}`];
              return arr.join('');
            },
      },
      series: [
        {
          type: 'treemap',
          // width:'60%',
          // height:'100%',
          show: true,
          color: colors,

          label: {
            show: true,
            position: 'insideTopLeft',
            formatter: (params) => {
              // console.warn(params);
              const arr = [`产品名称:${params.name}`, '', `$${params.value}`];
              return arr.join('\n');
            },
          },
          upperLabel: {
            show: true,
            // height:10
          },

          levels: [
            {
              // 钻入矩形树图的顶层
              show: true,
              itemStyle: {
                normal: {
                  // borderColor: 'yellow',
                  // gapWidth: 1,
                },
              },
            },
            {
              itemStyle: {
                normal: {
                  borderColor: 'red',
                  gapWidth: 2,
                },
              },
            },
            {
              itemStyle: {
                normal: {
                  gapWidth: 2,
                  borderWidth: 1,
                  borderColor: 'blue',
                },
              },
            },
            {
              itemStyle: {
                normal: {
                  gapWidth: 1,
                  borderWidth: 1,
                  borderColor: 'yellow',
                },
              },
            },
          ],
          data: series,
        },
      ],
    };
    return (
      <div>
        <ReactEcharts option={option} />
      </div>
    );
  };

  render() {
    return <div>{this.showEcharts()}</div>;
  }
}
MyEcharts.propTypes = {
  series: PropTypes.array, // 数据
  toolTipFormat: PropTypes.func, // 悬浮自定义
};
export default MyEcharts;
